<template>
  <div class="hls-player-container">
    <div class="video-wrapper">
      <video
        ref="videoRef"
        controls
        class="video-player"
        :poster="poster"
        @play="handlePlay"
        @pause="handlePause"
        @ended="handleEnded"
      ></video>
    </div>
    
    <div class="player-info">
      <div class="status-text">{{ statusMessage }}</div>
      <div class="controls" v-if="showControls">
        <button @click="togglePlay" class="control-btn">
          {{ isPlaying ? '暂停' : '播放' }}
        </button>
        <button @click="restartPlay" class="control-btn">重新播放</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck  // 此行会忽略当前组件所有TS错误
import { ref, onMounted, onUnmounted, watch, defineProps, defineEmits } from 'vue';
import Hls from 'hls.js';

// 组件属性
const props = defineProps({
  // HLS 视频流地址 (m3u8)
  src: {
    type: String,
    required: true
  },
  // 视频封面图
  poster: {
    type: String,
    default: ''
  },
  // 是否自动播放
  autoplay: {
    type: Boolean,
    default: false
  },
  // 是否显示控制按钮
  showControls: {
    type: Boolean,
    default: true
  }
});

// 组件事件
const emit = defineEmits([
  'play',    // 播放时触发
  'pause',   // 暂停时触发
  'ended',   // 播放结束时触发
  'error'    // 发生错误时触发
]);

// 状态管理
const videoRef = ref<HTMLVideoElement | null>(null);
const hlsInstance = ref<Hls | null>(null);
const isPlaying = ref(false);
const statusMessage = ref('准备加载视频...');
const isSupported = ref(false);

// 处理播放/暂停切换
const togglePlay = () => {
  if (!videoRef.value) return;
  
  if (isPlaying.value) {
    videoRef.value.pause();
  } else {
    videoRef.value.play().catch(err => {
      statusMessage.value = `播放失败: ${err.message}`;
      emit('error', err);
    });
  }
};

// 重新播放
const restartPlay = () => {
  if (videoRef.value) {
    videoRef.value.currentTime = 0;
    videoRef.value.play().catch(err => {
      statusMessage.value = `播放失败: ${err.message}`;
      emit('error', err);
    });
  }
};

// 播放事件处理
const handlePlay = () => {
  isPlaying.value = true;
  emit('play');
};

// 暂停事件处理
const handlePause = () => {
  isPlaying.value = false;
  emit('pause');
};

// 播放结束事件处理
const handleEnded = () => {
  isPlaying.value = false;
  emit('ended');
};

// 初始化播放器
const initPlayer = () => {
  if (!videoRef.value || !props.src) return;

  const video = videoRef.value;
  
  // 清理之前的实例
  if (hlsInstance.value) {
    hlsInstance.value.destroy();
    hlsInstance.value = null;
  }

  // 检查浏览器原生支持情况
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Safari 等原生支持 HLS 的浏览器
    isSupported.value = true;
    statusMessage.value = '使用原生 HLS 播放';
    video.src = props.src;
    
    // 处理自动播放
    if (props.autoplay) {
      video.play().catch(err => {
        statusMessage.value = `自动播放失败: ${err.message} (可能需要用户交互)`;
      });
    }
  } 
  // 检查 hls.js 支持情况
  else if (Hls.isSupported()) {
    isSupported.value = true;
    statusMessage.value = '初始化 HLS 播放器...';
    
    try {
      const hls = new Hls({
        maxBufferLength: 30,
        maxMaxBufferLength: 600,
        startLevel: -1 // 自动选择适合带宽的质量
      });
      
      hlsInstance.value = hls;
      
      // 加载视频源
      hls.loadSource(props.src);
      hls.attachMedia(video);
      
      // 监听事件
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        statusMessage.value = '视频准备就绪';
        isSupported.value = true;
        
        // 自动播放
        if (props.autoplay) {
          video.play().catch(err => {
            statusMessage.value = `自动播放失败: ${err.message} (可能需要用户交互)`;
          });
        }
      });
      
      // 错误处理
      hls.on(Hls.Events.ERROR, (event, data) => {
        console.error('HLS 错误:', data);
        statusMessage.value = `播放错误: ${data.type} - ${data.details}`;
        emit('error', data);
        
        // 尝试恢复
        if (data.fatal) {
          switch(data.type) {
            case Hls.ErrorTypes.NETWORK_ERROR:
              statusMessage.value = '网络错误，尝试重新加载...';
              hls.startLoad();
              break;
            case Hls.ErrorTypes.MEDIA_ERROR:
              statusMessage.value = '媒体错误，尝试恢复...';
              hls.recoverMediaError();
              break;
            default:
              // 无法恢复的错误，需要重新初始化
              statusMessage.value = '无法恢复的错误，重新加载播放器...';
              initPlayer();
              break;
          }
        }
      });
    } catch (error) {
      isSupported.value = false;
      statusMessage.value = `初始化失败: ${error instanceof Error ? error.message : String(error)}`;
      emit('error', error);
    }
  } else {
    isSupported.value = false;
    statusMessage.value = '您的浏览器不支持 HLS 视频播放';
    emit('error', new Error('浏览器不支持 HLS 播放'));
  }
};

// 监听 src 变化，重新加载视频
watch(
  () => props.src,
  () => {
    if (videoRef.value) {
      statusMessage.value = '视频地址变化，重新加载...';
      initPlayer();
    }
  }
);

// 组件挂载时初始化
onMounted(() => {
  initPlayer();
});

// 组件卸载时清理
onUnmounted(() => {
  if (hlsInstance.value) {
    hlsInstance.value.destroy();
    hlsInstance.value = null;
  }
});
</script>

<style scoped>
.hls-player-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.video-wrapper {
  width: 100%;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.video-player {
  width: 100%;
  height: auto;
  min-height: 300px;
}

.player-info {
  margin-top: 12px;
}

.status-text {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  padding: 4px 0;
}

.controls {
  display: flex;
  gap: 10px;
}

.control-btn {
  padding: 6px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.control-btn:hover {
  background-color: #359e6d;
}

.control-btn:active {
  background-color: #2a8659;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .video-player {
    min-height: 200px;
  }
}
</style>
